<template>
  <el-card>
    <el-row>
      <el-col>
        <!-- 表单开始 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="目录名称">
            <el-input
              size="small"
              v-model="formInline.user"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              @click="changeState(formInline.state)"
              size="small"
              v-model="formInline.state"
              placeholder="请选择"
            >
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="delBtn">清除</el-button>
            <el-button
              size="small"
              type="primary"
              @click="searchBtn(formInline.user, formInline.state)"
            >
              查询</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 表单结束 -->
      </el-col>
      <el-row type="flex" justify="end">
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="addBtn"
          >新增目录</el-button
        >
      </el-row>
    </el-row>
    <!-- 数据总共展示条数 -->

    <el-row type="flex" justify="start">
      <el-col :span="6">
        <span class="tol">
          <i class="el-icon-info"></i> 数据一共{{ counts }}条</span
        >
      </el-col>
    </el-row>

    <!-- 表格展示数据区域 -->
    <!-- <el-row>
      <el-col> -->

    <el-table v-loading="loading" :data="tableData">
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column label="所属学科" prop="subjectName" />
      <el-table-column label="目录名称" prop="directoryName" />
      <el-table-column label="创建者" prop="username" />
      <el-table-column label="创建日期" prop="addDate">
        <template v-slot="{ row }">
          {{ row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column label="面试题数量" prop="totals" />
      <el-table-column label="状态" prop="state">
        <template v-slot="{ row }">
          {{ row.state ? "已启用" : "已禁用" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="240">
        <template>
          <el-button type="text" size="small" @click="btn(index)" :stop="stop">
            {{ stop === 1 ? "启用" : "禁用" }}
          </el-button>
          <!-- <el-button type="text" size="small" @click="stopBtn(id, state)" >
                {{ state === 1 ? '启用': '禁用'}}
            </el-button> -->
          <el-button type="text" size="small" @click="updateBtn">
            修改</el-button>
          <el-button type="text" size="small" disabled>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- </el-col>
    </el-row> -->

    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <el-col :span="12"></el-col>
      <el-col :span="10">
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="page.page"
            :page-size="page.pagesize"
            layout="  prev, pager, next, sizes, jumper"
            :total="counts"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- 放置添加修改弹层组建 -->
    <directorysAdd
      :title="showTitle"
      ref="addrept"
      :showDialog.sync="showDialog"
      :tableData="tableData"
      @add="list"
      @update="updateBtn"
    />
  </el-card>
</template>

<script>
import { list, changeState } from '@/api/hmmm/directorys'
import directorysAdd from '@/module-hmmm/components/directorys-add'
export default {
  data () {
    return {
      formInline: {
        user: '',
        state: ''
      },

      page: {
        page: 1, // 当前页码值
        pagesize: 10 // 每页条数

      },
      counts: 0, // 总数
      tableData: [], // 定义一个空数组来接接受接口返回来的数据
      loading: false,
      state: '',
      id: '',
      stop: '',
      disabled: false,
      index: '',
      showDialog: false // 控制新增的弹层组建显示隐藏
    }
  },
  computed: {
    showTitle () {
      return this.id ? '新增目录' : '修改目录'
    }
  },
  created () {
    this.list()
    this.changeState()
  },
  methods: {
    handleCurrentChange (val) {
      this.page.page = val // 赋值最新的页码
      this.list() // 根据最新页码重新拉取数据
    },
    async changeState (state) {
      const result = await changeState({ id: this.id, state: this.state })
      console.log(result)
    },

    async list () {
      this.loading = true
      const data = await list(this.page)
      this.tableData = data.data.items
      console.log(typeof data.data.items[0].state)
      this.counts = data.data.counts
      this.loading = false
      this.tableData.forEach(item => {
        this.stop = !item.state
      })
    },
    async searchBtn (value, state) {
      // if (this.formInline.state === '启用') {
      //   var arr = []
      //   const { data } = await list({ ...this.page, directoryName: value, state: 1 })
      //   this.tableData = data.items
      //   this.tableData.forEach(async item => {
      //     this.tableData = arr.push(item.state)
      //     // console.log(1)
      //   })
      // } else {
      //   const { data } = await list({ ...this.page, directoryName: value, state: 0 })

      //   this.tableData = data.items
      // }
      // const { data } = await list({ ...this.page, directoryName: value })
      // this.tableData = data.items
      await this.list()
      if (value === '' && state === '') {
        this.list()
      } else if (value && state === '') {
        this.tableData = this.tableData.filter(item => item.directoryName.includes(value))
      } else if (value === '' && state !== '') {
        this.tableData = this.tableData.filter(item => item.state === Number(state))
      } else if (value && state === '1') {
        this.tableData = this.tableData.filter(item => item.directoryName.includes(value) && item.state === Number(state))
      } else if (value && state === '0') {
        this.tableData = this.tableData.filter(item => item.directoryName.includes(value) && item.state === Number(state))
      }
    },

    addBtn () {
      this.showDialog = true
    },
    delBtn () {
      this.formInline = {
        user: '',
        state: ''
      }
    },
    btn (index) {
      if (this.stop === '禁用') {
        this.stop = !this.stop
        this.tableData.state = !this.stop
        this.disabled = true
      }
    },
    updateBtn () {
      this.showDialog = true
    }

  },
  components: {
    directorysAdd
  }

}
</script>

<style scoped >
.tol {
  font-size: 14px;
  display: block;
  height: 40px;
  line-height: 40px;
  width: 1297px;
  background-color: #f4f4f5;
  margin: 0px 0px 20px -2px;
  color: #909399;
}
.el-icon-info {
  margin: 8px;
}
</style>
